<template>
	<view>
		<view class="">
			<!-- <view
				:style="'position: absolute;left: '+ selectBox.left +'px;top: '+ selectBox.top +'px;border: 1px solid red;width: '+ selectBox.width +'px;height: '+ selectBox.height +'px;background-color: rgba(255, 255, 255, .7);'">
			</view> -->

			<view class="gt-file-space">
				<!-- 左侧树形导航 -->
				<!-- <view class="left">
					<gt-tree :list="treeList" :parent_key="searchParams.parent_id" @change="changeSearchParentId">
					</gt-tree>
				</view> -->
				<!-- <view style="flex-grow: 1;background-color: #999999;padding: 15px;" @mousedown="mousedown" @mouseup="mouseup" @mousemove="mousemove"> -->
				<!-- 右侧 -->
				<scroll-view class="left" scroll-y="true" show-scrollbar>
					<view class="pd-15">
						<gt-tree :list="treeList" :parent_key="searchParams.parent_id" @change="changeSearchParentId">
						</gt-tree>
					</view>
				</scroll-view>
				<view class="right">
					<!-- 操作按钮组 -->
					<view class="right-top-btn">
						<view class="btn-upload" @click="uploadFile">
							<uni-icons type="image" size="20" color="#fff" class="mr-5"></uni-icons>
							<text>上传图片</text>
						</view>
						<view class="btn btn-default btn-sm btn-circle-sm ml-15">
							<view class="row" @click="createDirPopup()">
								<uni-icons type="folder-add" size="22" class="mr-5"></uni-icons>
								<view>新建文件夹</view>
							</view>
						</view>
						<view class="col-auto"></view>
						<view v-if="searchParams.status===1" class="btn btn-sm btn-default border-dashed"
							@click="changeSearchStatus(0)">回收站</view>
						<view v-else-if="searchParams.status===0" class="btn btn-sm btn-danger"
							@click="changeSearchStatus(1)">返回列表</view>
					</view>
					<!-- 导航 & 搜索 -->
					<view class="gt-nav-steps mt-15">
						<view class="ml-15 pointer" @click="dirGoBack()">
							<uni-icons type="arrow-left" size="22" color="#666666"></uni-icons>
						</view>
						<view class="ml-10 pointer" @click="getData()">
							<uni-icons type="reload" size="22" color="#666666"></uni-icons>
						</view>
						<view class="item arrows-right pointer" @click="dirGoBack()">全部</view>
						<!-- <view class="item arrows-right" v-for="(item,index) in fileRouter" :key="index">
							<text v-if="fileRouter.length != index + 1" class="btn btn-sm btn-link"
								@click="dirSkip(index)">{{item.val}}</text>
							<text v-else class="btn btn-sm btn-link c-secondary">{{item.val}}</text>
						</view> -->
						<view style="flex-grow: 1;padding: 5px;">
							<view style="border-right: 1px solid #eeeeee;height: 28px;"></view>
						</view>

						<view class="row" style="margin-left: 15px;margin-right: 15px;position: relative;">
							<input class="input" style="width: 150px;" v-model="searchParams.file_name" placeholder="搜索文件名" />
							<view v-show="searchParams.file_name" @click="clearSearchFileName" class="pointer" style="width: 16px;height: 16px;border-radius: 8px;background-color:rgba(0, 0, 0, .5);color:#fff;text-align: center;line-height: 16px;font-size: 10px;position: absolute;top: 10px;left: 120px;">✖</view>
							<uni-icons type="search" size="22" color="#666666" @click="getData()" class="pointer"></uni-icons>
						</view>
					</view>

					<!-- 文件区 -->
					<scroll-view style="height: 470px;border: 1px solid #ebebeb;border-radius: 0 0 5px 5px;border-top: none;" scroll-y="true">
						<view
							style="padding:15px;min-height: 398px;"
							class="row">
							<view v-if="list.length==0"
								style="text-align: center;line-height: 230px;width: 100%;font-weight: bolder;color:#999999">
								暂无文件</view>
							<view v-for="(item,index) in list" :key="index">
								<view v-if="item.is_dir==1" style="margin: 0 15px 15px 0;cursor: pointer;"
									@click="dirEnter(item)">
									<view
										style="width: 100px;height: 100px;background-color: #EBEEF5;border-radius: 5px;position: relative;"
										class="bg-img bg-img-cover gt-file" :style="'background:url('+fileUrl+')'">
										<!-- <view @click.stop="updateDirPopup(item.id,item.file_name)"
										style="width: 65px;height: 20px;background-color: rgba(0, 0, 0, .3);font-size: 12px;text-align: center;line-height: 20px;color:#fff;position: absolute;bottom: 11px;left: 5px;">
										修改</view> -->
										<view class="gt-file-setting"
											@click.stop="updateDirPopup(item.id,item.file_name)">
											<uni-icons type="gear-filled" size="12" color="#ffffff"></uni-icons>
										</view>
										<view v-if="searchParams.status===1" class="gt-file-delete"
											@click.stop="deleteFile(item.id,item.file_name)">
											<uni-icons type="closeempty" size="12" color="#ffffff"></uni-icons>
										</view>
										<view v-else-if="searchParams.status===0" class="gt-file-delete"
											@click.stop="recoverFile(item.id,item.file_name)">
											<uni-icons type="undo-filled" size="12" color="#ffffff"></uni-icons>
										</view>
									</view>
									<view class="t-row-1 t-center" style="line-height: 25px;width:100px;"
										@click="changeDirName(index)">
										{{item.file_name}}
									</view>
								</view>
								<view v-else style="margin: 0 15px 15px 0;overflow: hidden;cursor: pointer;">
									<view class="bg-img bg-img-cover gt-file" @click="selectFileFun(index)"
										:style="'background:url('+item.file_path+')'">
										<view @click.stop="showImgs(index)" class="gt-file-show-imgs">
											<!-- <uni-icons type="gear" size="14" color="#ffffff"></uni-icons> -->
											<uni-icons type="search" size="12" color="#ffffff"></uni-icons>
										</view>
										<view class="gt-file-setting"
											@click.stop="updateDirPopup(item.id,item.file_name)">
											<uni-icons type="gear-filled" size="12" color="#ffffff"></uni-icons>
										</view>
										<view v-if="searchParams.status===1" class="gt-file-delete"
											@click.stop="deleteFile(item.id,item.file_name)">
											<uni-icons type="closeempty" size="12" color="#ffffff"></uni-icons>
										</view>
										<view v-else-if="searchParams.status===0" class="gt-file-delete"
											@click.stop="recoverFile(item.id,item.file_name)">
											<uni-icons type="undo-filled" size="12" color="#ffffff"></uni-icons>
										</view>
										<view v-if="getSelectFileIndex(item.id)!==undefined">
											<view class="gt-file-selected">
												<view class="gt-file-selected-success">✔</view>
											</view>
											<view @click="$fun.showImgs([item.file_path])"
												class="gt-file-selected-index">
												{{getSelectFileIndex(item.id)+1}}
											</view>
										</view>

									</view>
									<view class="t-row-1 t-center" style="width: 75px;line-height: 25px;">
										{{item.file_name}}
									</view>
								</view>
							</view>
						</view>
					</scroll-view>
					<view class="row  mt-10">
						<!-- 批量操作 -->
						<view class="col-auto">
							<view v-if="selectFiles.length>0">
								<view class="row" v-if="type=='select'">
									<view class="btn btn-sm btn-success mr-15" @click="confirmSelectFileUrl()">确认</view>
									<view class="btn btn-sm btn-default" @click="cancelSelectFileUrl()">取消</view>
									<view class="l-h-md ml-15 mr-5">已选 {{selectFiles.length}} </view>
									<view class="l-h-md" v-if="limit>0">/ {{limit}} </view>
								</view>
								<view class="row" v-else-if="type=='editor'">
									<view v-if="searchParams.status===1" class="btn btn-sm btn-danger mr-15"
										@click="deleteFiles()">删除</view>
									<view v-else-if="searchParams.status===0" class="btn btn-sm btn-danger mr-15"
										@click="recoverFiles()">恢复</view>
									<view class="btn btn-sm btn-success mr-15" @click="changeParentId()">移动</view>
									<view class="btn btn-sm btn-default mr-15" @click="cancelSelectFileUrl()">取消</view>
									<view class="l-h-md mr-5">已选 {{selectFiles.length}} </view>
									<view class="l-h-md" v-if="limit>0">/ {{limit}} </view>
									<view class="col-auto"></view>
								</view>
							</view>

						</view>
						<!-- 分页 -->
						<view class="row ">
							<uni-pagination prevText="上一页" nextText="下一页" :total="pageInfo.totalCount"
								:pageSize="pageInfo.limit" :current="pageInfo.page" @change="pagination">
							</uni-pagination>
						</view>
					</view>
				</view>


			</view>


			<uni-popup ref="dirPopup" type="center">
				<view style="width: 100vw;height: 100vh;position: relative;">
					<view style="position: absolute;top: 0;left: 0;width: 100vw;height: 100vh;"
						@click="$refs.dirPopup.close()"></view>
					<view style="height: 100vh;max-width: 280px;width: 100%;margin: auto;padding: 20vh 30px;">
						<view style="width:100%;background-color: #fff;overflow: hidden;border-radius: 8px;">
							<view class="t-lg pd-10 border-bottom t-center" style="width: 100%;;">
								{{ dirForm.id ? '修改文件名' : '创建文件' }}
							</view>
							<scroll-view scroll-y="true" class="scroll-view-y" style="max-height: 60vh;">
								<view class="pd-30">
									<input class="input-line" v-model="dirForm.file_name" placeholder="文件名称" />
									<view class="btn btn-full mt-15" @click="submitDir">提交</view>
								</view>
							</scroll-view>
						</view>
					</view>
				</view>
			</uni-popup>
		</view>
	</view>
</template>

<script>
	export default {
		name: "gt-file-space",
		props: {
			type: {
				type: String,
				default: () => {
					return 'editor';
				}
			},
			limit: {
				type: [Number, String],
				default: () => {
					return 0;
				}
			},
			platform: {
				type: Boolean,
				default: () => {
					return false;
				}
			}
		},
		data() {
			return {
				searchParams: {
					parent_id: 0,
					status: 1,
					file_name:''
				},
				dirForm: {
					file_name: '',
					parent_id: 0
				},
				list: [],
				pageInfo: {},
				fileRouter: [],
				fileUrl: '',
				searchPage: '',
				treeList: [],
				selectFileIndex: [],
				selectFiles: [],
				selectBox: ''
			}
		},
		created() {
			this.fileUrl = this.$var.apiUrl + '/static/img/file.png';
			this.getData();
		},
		computed: {},
		methods: {
			clearSearchFileName(){
				this.searchParams.file_name = '';
				this.getData();
			},
			// mousedown(e){
			// 	this.selectBox = {
			// 		x:e.clientX,
			// 		y:e.clientY,
			// 		left:'',
			// 		top:'',
			// 		width:'',
			// 		height:'',
			// 	};
			// },
			// mousemove(e){
			// 	if(this.selectBox){
			// 		let width = e.clientX - this.selectBox.x;
			// 		let height = e.clientY - this.selectBox.y;
			// 		if(width > 0 && height > 0){
			// 			this.selectBox.top = this.selectBox.y;
			// 			this.selectBox.left = this.selectBox.x;
			// 			this.selectBox.width = width;
			// 			this.selectBox.height = height;
			// 		}
			// 	console.log(this.selectBox)
			// 	}
			// },
			// mouseup(e){
			// 	this.selectBox = '';
			// },
			changeSearchStatus(status) {
				this.searchParams.status = status;
				this.getData();
			},
			createDirPopup() {
				this.dirForm = {
					parent_id: this.searchParams.parent_id,
					file_name: ''
				}
				this.$refs.dirPopup.open();
			},
			updateDirPopup(id, name) {
				this.dirForm.file_name = name;
				this.dirForm.id = id;
				this.$refs.dirPopup.open();
			},
			deleteFile(id, name) {
				this.$post({
					url: '/sys/sys-file/user-deletes?ids=' + id,
					_this: this,
					afterFun(res, _this) {
						if (res.msg) {
							_this.getData()
						}
					}
				});
			},
			recoverFile(id, name) {
				this.$post({
					url: '/sys/sys-file/user-recovers?ids=' + id,
					_this: this,
					afterFun(res, _this) {
						if (res.msg) {
							_this.getData()
						}
					}
				});
			},
			showImgs(index) {
				console.log(index);
				let imgs = [];
				let key = 0;
				for (let i in this.list) {
					let row = this.list[i];
					if (row.file_path && row.is_dir == 0) {
						let imgIndex = imgs.push(row.file_path);
						if (i == index) {
							key = imgIndex - 1;
						}
					}

				}
				console.log(key);
				this.$fun.showImgs(imgs, key)
			},
			//文件移动
			changeParentId() {
				let _this = this;
				let ids = '';
				for (let i in this.selectFiles) {
					let row = this.selectFiles[i];
					ids += ids ? ',' + row.id : row.id;
				}
				if (ids) {
					let url = this.platform == false ? '/sys/sys-file/user-change-parent-id' :
						'/sys/sys-file/change-parent-id';
					this.$post({
						url: url + '?ids=' + ids + '&parent_id=' + this.searchParams
							.parent_id,
						afterFun(r) {
							if (r.msg) {
								_this.getData();
								_this.selectFiles = [];
							}
						}
					});
				}
			},
			//删除文件
			deleteFiles() {
				let _this = this;
				let ids = '';
				for (let i in this.selectFiles) {
					let row = this.selectFiles[i];
					ids += ids ? ',' + row.id : row.id;
				}
				if (ids) {
					let url = this.platform == false ? '/sys/sys-file/user-deletes' : '/sys/sys-file/deletes';
					this.$post({
						url: url + '?ids=' + ids,
						afterFun(r) {
							if (r.msg) {
								_this.getData();
								_this.selectFiles = [];
							}
						}
					});
				}
			},
			//恢复文件
			recoverFiles() {
				let _this = this;
				let ids = '';
				for (let i in this.selectFiles) {
					let row = this.selectFiles[i];
					ids += ids ? ',' + row.id : row.id;
				}
				if (ids) {
					let url = this.platform == false ? '/sys/sys-file/user-recovers' : '/sys/sys-file/recovers';
					this.$post({
						url: url + '?ids=' + ids,
						afterFun(r) {
							if (r.msg) {
								_this.getData();
								_this.selectFiles = [];
							}
						}
					});
				}
			},
			//确认选择文件
			confirmSelectFileUrl() {
				let str = '';
				for (let i in this.selectFiles) {
					let row = this.selectFiles[i];
					// console.log(row.file_path)
					str += str ? ',' + row.file_path : row.file_path;
				}
				this.$emit('change', str);
				this.selectFiles = [];
			},
			//取消选择文件
			cancelSelectFileUrl() {
				this.selectFiles = [];
			},
			//进入文件夹
			dirEnter(row) {
				this.fileRouter.push({
					key: row.id,
					val: row.file_name
				})
				this.searchParams.parent_id = row.id;
				this.dirForm.parent_id = row.id;
				this.getData();
			},
			//返回
			dirGoBack() {
				this.fileRouter.splice(this.fileRouter.length - 1, 1);
				this.dirForm.parent_id = !this.fileRouter[this.fileRouter.length - 1] ? 0 : this.fileRouter[this.fileRouter
					.length - 1].key;
				this.searchParams.parent_id = this.dirForm.parent_id;
				this.getData();
			},
			//切换文件夹
			dirSkip(index) {
				if (index !== undefined) {
					this.fileRouter.splice(index + 1, 1);
					this.dirForm.parent_id = !this.fileRouter[index] ? 0 : this.fileRouter[index].key;
				} else {
					this.fileRouter = [];
					this.dirForm.parent_id = 0;
				}

				this.searchParams.parent_id = this.dirForm.parent_id;
				this.getData();
			},
			getData() {
				let _this = this
				let url = this.platform == false ? '/sys/sys-file/user-list' : '/sys/sys-file/list';
				let data = {
					page: this.pageInfo.page,
					...this.searchParams
				};
				this.$get({
					url: url,
					data: data,
					_this: this,
					afterFun(r) {

					}
				})
				this.getTreeList()
			},
			getTreeList() {
				let _this = this
				let url = this.platform == false ? '/sys/sys-file/user-tree-list' : '/sys/sys-file/tree-list';
				this.$get({
					url: url,
					afterFun(r) {
						if (r) {
							_this.treeList = r;
						}
					}
				})
			},
			// 分页获取列表
			pagination(e) {
				// console.log(e.current)
				this.pageInfo.page = e.current
				this.getData();
			},
			submitDir() {
				if (!this.dirForm.file_name) {
					this.$fun.showMsg('请输入文件名称');
					return false;
				}
				let _this = this;
				if (this.dirForm.id) {
					let url = this.platform == false ? '/sys/sys-file/user-update' : '/sys/sys-file/update';
					this.$post({
						url: url + '?id=' + this.dirForm.id,
						data: this.dirForm,
						afterFun(r) {
							if (r.msg) {
								_this.getData();
								_this.dirForm = {
									file_name: ''
								}
								_this.$refs.dirPopup.close();
							}
						}
					});
				} else {
					let url = this.platform == false ? '/sys/sys-file/user-create' : '/sys/sys-file/create';
					this.$post({
						url: url,
						data: this.dirForm,
						afterFun(r) {
							if (r.msg) {
								_this.getData();
								_this.dirForm = {
									file_name: ''
								}
								_this.$refs.dirPopup.close();
							}
						}
					});
				}

			},
			uploadFile() {
				var _this = this;
				this.$tools.uploadFile({
					type: 'image',
					count: 100,
					success: (filePath, fileInfo) => {
						// console.log(fileInfo);
						// return false;
						let url = _this.platform == false ? '/sys/sys-file/user-create' :
							'/sys/sys-file/create';
						_this.$post({
							url: url,
							data: {
								parent_id: _this.searchParams.parent_id,
								file_name: fileInfo.name,
								file_path: _this.$var.fileUrl + filePath,
								size: fileInfo.size
							},
							afterFun(r) {
								if (r.msg) {
									_this.getData();
								}
							}
						});
					},
					loading(progress) {}
				})
			},
			getSelectFileIndex(id) {
				let i;
				for (let index in this.selectFiles) {
					let item = this.selectFiles[index];
					if (item.id === id) {
						i = parseInt(index);
						continue;
					}
				}
				return i;
			},
			selectFileFun(index) {
				let row = this.list[index];

				let i = this.getSelectFileIndex(row.id);
				if (i === undefined) {
					let limit = parseInt(this.limit);
					if (limit == 1 && this.selectFiles.length >= 1) {
						return false;
					}
					if (limit > 0 && this.selectFiles.length >= limit) {
						return false;
					}
					this.selectFiles.push(row);
				} else {
					this.selectFiles.splice(i, 1);
				}
			},
			changeSearchParentId(row) {
				// console.log(row);
				if (!row) {
					this.searchParams.parent_id = 0;
					this.fileRouter = [];
				} else {
					this.searchParams.parent_id = row.key;
					this.fileRouter = this.recursion(this.treeList, row.key);
				}
				this.getData();
			},
			recursion(treeList, key) {
				// console.log(key);
				let arr = [];
				let isTrue = false;
				for (let i in treeList) {
					let row = treeList[i];
					if (row.key == key) {
						arr.push({
							key: row.key,
							val: row.name
						});
						return arr;
					} else {
						let r = this.recursion(row.items, key);
						if (r.length > 0) {
							arr.push({
								key: row.key,
								val: row.name
							});
							arr = arr.concat(r);
						}
					}
				}
				return arr;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.gt-file-space {
		display: flex;
		flex-flow: row wrap;
		box-sizing: border-box;
	}

	.gt-file-space .left {
		width: 220px;
		margin-right: 15px;
		border: 1px solid #eeeeee;
		border-radius: 5px;
		height: 585px;
	}

	.gt-file-space .right {
		flex-grow: 1;
		width: 0;
	}

	.gt-file-space .right-top-btn {
		display: flex;
		flex-flow: row wrap;
	}

	.btn-upload {
		background-color: #409EFF;
		border: 1px solid #409EFF;
		color: #fff;
		padding: 0 12px;
		font-size: 14px;
		height: 38px;
		line-height: 38px;
		white-space: nowrap;
		text-align: center;
		cursor: pointer;
		border-radius: 18px;
		box-sizing: border-box;
		font-size: 12px;
		height: 30px;
		line-height: 30px;
		padding: 0 12px;
		display: flex;
		flex-flow: row wrap;
	}

	.btn-new-file {}









	.gt-file-space-nav {
		flex-grow: 1;
		width: 0;
	}

	.gt-file-space-process {}

	.gt-file-space-row {
		display: flex;
		flex-flow: row wrap;
		box-sizing: border-box;
	}

	.gt-file-space-tree {
		width: 150px;
		height: 290px;
		border: 1px solid #eeeeee;
		border-radius: 5px;
		min-height: 270px;
		padding: 10px;
	}

	.gt-file-space-right {
		flex-grow: 1;
		width: 0;
	}

	.gt-file-space-content {
		border-radius: 5px;
		border: 1px solid #eeeeee;
		padding: 30px;
		min-height: 290px;
	}

	.gt-file {
		width: 100px;
		height: 100px;
		border-radius: 5px;
		position: relative;
		overflow: hidden;
	}

	.gt-file:hover {
		.gt-file-show-imgs {
			display: block !important;
		}

		.gt-file-setting {
			display: block !important;
		}

		.gt-file-delete {
			display: block !important;
		}
	}

	.gt-file-show-imgs {
		width: 18px;
		height: 18px;
		line-height: 18px;
		text-align: center;
		font-size: 12px;
		border-radius: 9px;
		background-color: rgba(0, 0, 0, .6);
		position: absolute;
		right: 45px;
		top: 5px;
		color: #ffffff;
		display: none;


		// height: 20px;
		// width: 75px;
		// background-color: rgba(0, 0, 0, .3);
		// position: absolute;
		// left: 0;
		// bottom: 0;
		// line-height: 20px;
		// text-align: center;
		// color: #ffffff;
		// border-radius: 0 0 5px 5px;
		// font-size: 12px;
		// display: none;
	}

	.gt-file-setting {
		width: 18px;
		height: 18px;
		line-height: 18px;
		text-align: center;
		font-size: 12px;
		border-radius: 9px;
		background-color: rgba(0, 0, 0, .6);
		position: absolute;
		right: 24px;
		top: 5px;
		color: #ffffff;
		display: none;
	}

	.gt-file-delete {
		width: 18px;
		height: 18px;
		line-height: 18px;
		text-align: center;
		font-size: 12px;
		border-radius: 9px;
		background-color: rgba(0, 0, 0, .6);
		position: absolute;
		right: 3px;
		top: 5px;
		color: #ffffff;
		display: none;
	}



	// .gt-file-selected {
	// 	width: 0;
	// 	height: 0;
	// 	border-right: 30px solid #409EFF;
	// 	border-bottom: 30px solid transparent;
	// 	position: absolute;
	// 	right: 0;
	// 	top: 0;
	// 	color: #ffffff;
	// }

	.gt-file-selected-success {
		font-size: 12px;
		position: absolute;
		right: -26px;
		top: -1px;
		color: #ffffff;
	}

	.gt-file-selected-index {
		position: absolute;
		left: 5px;
		top: 5px;
		color: #ffffff;
		background-color: rgba(255, 0, 0, .7);
		width: 20px;
		height: 20px;
		border-radius: 10px;
		text-align: center;
		line-height: 20px;
		font-size: 14px;
	}


	.gt-nav-steps {
		height: 38px;
		background-color: #ffffff;
		line-height: 38px;
		// display: inline-block;
		border-radius: 3px;
		overflow: hidden;
		border: 1px solid #ebebeb;
		display: flex;
		flex-flow: row wrap;
	}

	.gt-nav-steps .item {
		padding: 0 20px;
		display: inline-block;
		position: relative;
	}

	.gt-nav-steps .arrows-right:before {
		content: "";
		border-left: 25px solid #ebebeb;
		border-top: 25px solid transparent;
		border-bottom: 25px solid transparent;
		position: absolute;
		right: -8px;
		top: -6px;
	}

	.gt-nav-steps .arrows-right:after {
		content: "";
		border-left: 25px solid #ffffff;
		border-top: 25px solid transparent;
		border-bottom: 25px solid transparent;
		position: absolute;
		right: -7px;
		top: -6px;
	}
</style>
